@import "mixin";
@import "footer";
@import "aside";

body {
  padding-bottom: rem(50px);
}

.header {
  position: relative;
  width: 100%;
  height: rem(136px);
  background: url("../images/usercenter-header-bg.png") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  >.header-panel {
    position: absolute;
    top: rem(20px);
    left: rem(16px);
    padding: 0 rem(12px);
    width: rem(343px);
    height: rem(150px);
    background-color: #fff;
    border-radius: rem(4px);
    box-shadow: 0 0 rem(4px) rgba(252, 63, 63, 0.3);
    >.header-panel-top {
      display: flex;
      width: 100%;
      height: rem(77px);
      @include border-bottom-1px(#e5e5e5);
      >.userinfo {
        flex: 0 0 rem(250px);
        padding-top: rem(16px);
        width: rem(250px);
        font-size: 0;
        >.avatar {
          display: inline-block;
          float: left;
          width: rem(49px);
          height: rem(49px);
          border-radius: 50%;
          overflow: hidden;
          >img {
            width: 100%;
            height: 100%;
          }
        }
        >.info-wrapper {
          float: left;
          padding-left: rem(10px);
          >.name {
            line-height: rem(29px);
            font-size: rem(15px);
          }
          >.user-number {
            line-height: rem(16px);
            font-size: rem(12px);
          }
        }
      }
      >.tool-box {
        flex: 1;
        padding: rem(26px) 0 0 0;
        height: rem(77px);
        font-size: 0;
        >.hasMsg {
          &:before {
            content: '';
            display: inline-block;
            width: rem(8px);
            height: rem(8px);
            position: absolute;
            top: 0;
            right: rem(-4px);
            background-color: #dc3838;
            border-radius: 50%;
          }
        }
        >.message {
          position: relative;
          display: inline-block;
          width: rem(25px);
          height: rem(22px);
          @include bg-image('../images/usercenter-message');
          &.hasMsg {
            &:before {
              top: rem(-2px);
            }
          }
        }
        >.setting {
          position: relative;
          display: inline-block;
          vertical-align: sub;
          margin: 0 0 0 rem(15px);
          width: rem(25px);
          height: rem(25px);
          @include bg-image('../images/usercenter-setting');
        }
      }
    }
    >.header-panel-bottom {
      display: flex;
      width: 100%;
      >.total-return {
        flex: 1;
        padding-top: rem(18px);
        >p {
          text-align: center;
          line-height: rem(20px);
          font-size: rem(12px);
          color: #999999;
          &.total-money {
            line-height: rem(24px);
            font-size: rem(20px);
            color: #333333;
          }
        }
      }
      >.yesterday-return {
        flex: 1;
        padding-top: rem(18px);
        >p {
          text-align: center;
          line-height: rem(20px);
          font-size: rem(12px);
          color: #999999;
          &.yesterday-money {
            line-height: rem(24px);
            font-size: rem(20px);
            color: #333333;
          }
        }
      }
    }
  }
}
.header-dropmenu {
  padding-top: rem(46px);
  width: 100%;
  background-color: #fff;
  >.wrapper {
    width: 100%;
    >a {
      display: block;
      padding: rem(10px) rem(16px);
      font-size: 0;
      >.usercenter-icon-pusher {
        display: inline-block;
        vertical-align: top;
        width: rem(24px);
        height: rem(24px);
        line-height: rem(24px);
        @include bg-image('../images/usercenter-icon-pusher')
      }
      >.icon-auto-get-cash {
        display: inline-block;
        vertical-align: top;
        width: rem(24px);
        height: rem(24px);
        line-height: rem(24px);
        @include bg-image('../images/icon-auto-get-cash')
      }
      >span {
        padding-left: rem(10px);
        display: inline-block;
        vertical-align: top;
        line-height: rem(24px);
        font-size: rem(16px);
        color: #999999;
      }
      >.arrow-wrapper {
        float: right;
        display: inline-block;
        vertical-align: top;
        padding-top: rem(6px);
        height: rem(24px);
        line-height: rem(24px);
        >.arrow-right {
          display: inline-block;
          vertical-align: text-bottom;
          width: rem(8px);
          height: rem(12.5px);
          @include bg-image('../images/arrow-right');
          background-repeat: no-repeat;
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
        }
      }
      >.text-wrapper {
        float: right;
        display: inline-block;
        height: 100%;
        >span {
          line-height: rem(24px);
          font-size: rem(16px);
          color: #999999;
        }
      }
      &:first-child {
        @include border-bottom-1px(#e5e5e5);
      }
    }
  }
}

.todays-datas {
  margin-top: rem(10px);
  >.todays-datas-header {
    width: 100%;
    background-color: #ffffff;
    >h5 {
      padding: 0 rem(16px);
      line-height: rem(28px);
      font-size: rem(12px);
      color: #666666;
    }
  }
  >.todays-datas-body {
    margin-bottom: rem(10px);
    width: 100%;
    background-color: #fff;
    font-size: 0;
    >.todays-datas-wrapper {
      padding: 0 rem(16px);
      width: 100%;
      height: 100%;
      >li {
        margin-bottom: rem(5px);
        float: left;
        width: 50%;
        line-height: rem(15px);
        >p {
          text-align: center;
          font-size: rem(12px);
          color: #999999;
          &.data-desc {
            float: left;
          }
          &.data {
            float: right;
            >em {
              font-style: normal;
              font-size: rem(16px);
              color: #333333;
            }
          }
        }
        &:nth-child(2n) {
          padding-left: rem(10px);
        }
        &:nth-child(2n+1) {
          padding-right: rem(10px);
          border-right: rem(1px) solid #e5e5e5;
        }
      }
    }
  }
}

.user-account {
  >.user-account-wrapper {
    margin-bottom: rem(10px);
    padding: 0 rem(15px);
    width: 100%;
    background-color: #fff;
    >.user-account-item {
      width: 100%;
      height: rem(43px);
      line-height: rem(43px);
      background-color: #fff;
      @include border-bottom-1px(#e5e5e5);
      >a {
        display: block;
        width: 100%;
        height: 100%;
      }
      >span {
        display: inline-block;
        float: right;
        font-size: rem(16px);
        color: #333;
        &.item-name {
          float: left;
        }
        &.total-cash-money {
          color: #333333;
        }
        &.item-desc {
          color: #999999;
        }
      }
      >.arrow-wrapper {
        float: right;
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: rem(7px);
        width: rem(8px);
        height: 100%;
        line-height: rem(24px);
        >.arrow-right {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          display: inline-block;
          vertical-align: text-bottom;
          width: rem(8px);
          height: rem(12.5px);
          @include bg-image('../images/arrow-right');
          background-repeat: no-repeat;
          -webkit-background-size: 100% 100%;
          background-size: 100% 100%;
        }
      }
      &:last-child {
        &:after {
          display: none;
        }
      }
    }
  }
}

.my-platform {
  >.my-platform-header {
    padding-left: rem(20px);
    width: 100%;
    height: rem(50px);
    background-color: #fff;
    @include border-bottom-1px(#e5e5e5);
    >h5 {
      display: inline-block;
      padding-left: rem(9px);
      border-left: rem(4px) solid #dc3838;
      height: rem(16px);
      line-height: rem(16px);
      font-weight: bold;
      font-size: rem(16px);
      color: #333333;
      >span {
        padding-left: rem(12px);
        font-size: rem(12px);
        color: #999999;
      }
    }
  }
  >.no-item-wrapper {
    padding-top: rem(40px);
    width: 100%;
    height: rem(228px);
    text-align: center;
    background-color: #fff;
    font-size: 0;
    >p {
      line-height: rem(20px);
      font-size: rem(12px);
      color: #999999;
    }
    >a {
      text-decoration: underline;
      line-height: rem(20px);
      font-size: rem(12px);
      color: #dc3838;
    }
  }
  >.my-platform-content {
    width: 100%;
    >.my-platform-wrapper {
      >.my-platform-item {
        margin-bottom: rem(10px);
        width: 100%;
        background-color: #fff;
        >.platform-wrapper {
          @include border-bottom-1px(#e5e5e5);
          max-height: rem(170px);
          background-color: #fff;
          overflow: hidden;
          >.platform-item {
            height: rem(170px);
            @include border-bottom-1px(#e5e5e5);
            >.item-header {
              display: flex;
              width: 100%;
              height: rem(56px);
              font-size: 0;
              >.plat-logo-wrapper {
                position: relative;
                flex: 1;
                text-align: center;
                >img {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%) translateY(-50%);
                }
              }
              >.plat-return-type-wrapper {
                position: relative;
                flex: 1;
                >p {
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  padding-left: rem(10px);
                  font-size: rem(14px);
                  color: #999999;
                }
              }
              >.spread-btn-wrapper {
                position: relative;
                flex: 1;
                >.spread-btn {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%) translateY(-50%);
                  width: rem(60px);
                  height: rem(30px);
                  line-height: rem(28px);
                  text-align: center;
                  border: rem(1px) solid #dc3838;
                  border-radius: rem(3px);
                  font-size: rem(13px);
                  color: #dc3838;
                }
              }
            }
            >.item-content {
              width: 100%;
              height: rem(114px);
              font-size: 0;
              >.item-content-wrapper {
                margin: rem(10px) 0;
                display: flex;
                >li {
                  flex: 1;
                  border-right: rem(1px) solid #e5e5e5;
                  >p {
                    text-align: center;
                    font-size: rem(12px);
                    color: #333333;
                    >em {
                      font-style: normal;
                      font-size: rem(16px);
                    }
                    &.item-desc {
                      line-height: rem(24px);
                      color: #999999;
                    }
                  }
                  &:last-child {
                    border-right: none;
                    >p {
                      line-height: rem(16px);
                      &.item-desc {
                        line-height: rem(24px);
                        color: #999999;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        >.more-btn {
          margin-bottom: rem(10px);
          width: 100%;
          height: rem(39px);
          line-height: rem(39px);
          background-color: #fff;
          text-align: center;
          font-size: rem(12px);
          color: #999999;
        }
      }
    }
  }
}

//弹层样式
.get-cash-layer {
  position: relative;
  width: rem(280px);
  height: rem(150px);
  border-radius: rem(8px)!important;
  box-sizing: border-box!important;
  >.content-wrapper {
    padding: rem(24px) rem(10px) 0;
    >h3 {
      height: rem(48px);
      line-height: rem(48px);
      font-size: rem(18px);
      color: #333333;
    }
    >.text {
      text-align: center;
      font-size: rem(15px);
      color: #999999;
    }
  }
  >.btn-wrapper {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: rem(50px);
    border-top: rem(1px) solid #e5e5e5;
    >a {
      flex: 1;
      width: 100%;
      height: rem(50px);
      line-height: rem(50px);
      text-align: center;
      &:first-child {
        border-right: rem(1px) solid #e5e5e5;
      }
      &:last-child {
        color: #dc3838;
      }
    }
  }
}

.avatar-layer {
  .layui-m-layercont {
    padding: 0!important;
  }
  .layui-m-layerbtn {
    >span[no] {
      border-radius: 5px!important;
    }
  }
}